<template>
	<div id="img_view_id" class="div_box">
		<div id="img_id" class="div_img" :style="setImgStyle">
			<img class="picture" :src="props.imgUrl" />
		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';

const props = defineProps({
	imgUrl:{
		default:'',
		type:String
	}
})

const imgScale = ref(1);
const imgLeft = ref(0);
const imgTop = ref(0);
const imgRotate = ref(0);

const setImgStyle = computed(() => {
	return {
		left: `${imgLeft.value}px`,
		transform: `scale(${imgScale.value}) rotate(${imgRotate.value}deg)`,
		top: `${imgTop.value}px`,
	};
});

const scrollFun = (v: any) => {
	v = v || window.event;
	if (v.preventDefault) {
		v.preventDefault();
		v.stopPropagation();
	} else {
		v.cancelBubble = true;
		v.returnValue = false;
	}
	return false;
};

const disabledMouseWheel = () => {
	let el = document.getElementById('img_view_id');
	if (!el) return;
	if (el.addEventListener) {
		el.addEventListener('DOMMouseScroll', scrollFun, false);
	}
	el.onwheel = scrollFun;
};

const addMouseScroll = () => {
	let img_el = document.getElementById('img_id');
	if (!img_el) return;
	img_el.onwheel = (event) => {
		if (event.wheelDelta > 0) {
			imgScale.value = computeNumberAddOrMinus(imgScale.value, 0.15, 1);
		} else {
			if (imgScale.value > 1) {
				imgScale.value = computeNumberAddOrMinus(imgScale.value, 0.15, 2);
			}
		}
	};
	img_el.onmousedown = (event) => {
		event.preventDefault();
		document.onmousemove = (e) => {
			let moveX = e.movementX;
			let moveY = e.movementY;
			imgLeft.value += moveX;
			imgTop.value += moveY;
		};
		document.onmouseup = (e) => {
			document.onmousemove = null;
			document.onmouseup = null;
		};
		document.onmouseout = (e) => {
			document.onmousemove = null;
			document.onmouseout = null;
		};
	};
};

const computeNumberAddOrMinus = (numMax = 0, numMin = 0, type = 1) => {
	const regex = /^\d+(\.\d+)?$/;
	if (!regex.test(numMax)) {
		console.log('第一个参数非数字');
		return 0;
	}
	if (!regex.test(numMin)) {
		console.log('第二个参数非数字');
		return 0;
	}
	let max_int = parseInt(numMax);
	let min_int = parseInt(numMin);
	let max_dec = numMax.toString().split('.')[1] || '';
	let min_dec = numMin.toString().split('.')[1] || '';
	let max_dec_lth = max_dec.length;
	let min_dex_lth = min_dec.length;
	let max_lth = max_dec_lth > min_dex_lth ? max_dec_lth : min_dex_lth;
	if (type == 1) {
		//加法
		let result_int = max_int + min_int;
		let result_dec = Number(max_dec) * Math.pow(10, max_lth - max_dec_lth) + Number(min_dec) * Math.pow(10, max_lth - min_dex_lth);
		return (result_int * Math.pow(10, max_lth) + result_dec) / Math.pow(10, max_lth);
	} else {
		//减法
		let result_int = max_int - min_int;
		let result_dec = Number(max_dec) * Math.pow(10, max_lth - max_dec_lth) - Number(min_dec) * Math.pow(10, max_lth - min_dex_lth);
		return (result_int * Math.pow(10, max_lth) + result_dec) / Math.pow(10, max_lth);
	}
};

onMounted(async () => {
	await nextTick();
	disabledMouseWheel();
	addMouseScroll();
});

onUnmounted(() => {
	let div_el = document.getElementById('img_view_id');
	let img_el = document.getElementById('img_id');
	if (div_el) {
		div_el.onwheel = null;
	}
	if (img_el) {
		img_el.onwheel = null;
		img_el.onmousedown = null;
	}
});
</script>
<style lang='less' scoped>
.div_box {
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
}
.div_img {
	width: 100%;
	height: 100%;
	position: absolute;
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
.picture {
	width: 100%;
	height: 100%;
	cursor: crosshair;
}
</style>